<template>
    <view id="carBody">
        <!--免运费提示-->
        <view v-if="yunFei.yunFeiState" class="tiShiYunFei">
            <view>再购<text class="goldColor">{{yunFei.toMianFei-buyMoney}}元</text>，可享满{{yunFei.toMianFei}}免配送费</view>
            <view class="closeYunFei" @click="yunFei.yunFeiState=false">×</view>
        </view>
        <!--换购提示-->
        <view class="tiShiHuanGou">
            <view v-if="huanGou.toHuanGou-buyMoney>0">全场商品再购<text class="goldColor">{{huanGou.toHuanGou-buyMoney}}元</text>，可参与换购</view>
            <view v-if="huanGou.toHuanGou-buyMoney<=0">全场商品已满<text class="goldColor">{{huanGou.toHuanGou}}元</text>，可参与换购</view>
            <navigator url="../findDetail/findDetail" class="goldColor">去看看 ></navigator>
        </view>
        <!--购物车商品展示-->
        <view class="showCar">
            <view class="uni-list">
                <checkbox-group @change="checkboxChange">
                    <label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in carData.data" :key="index">
                        <view>
                            <checkbox :value="item.name" :checked="item.chooseState" />
                        </view>
                        <view>
                            <view class="imgBox">
                                <image :src="item.imgSrc" mode="center"></image>
                            </view>
                            <view class="neiRong">
                                <view>{{item.name}}</view>
                                <view>{{item.guiGe}}</view>
                                <view>
                                    <text>￥ {{item.price}} </text>
                                    <view class="jiaJian">
                                        <view @click.stop="jianNum(item.name,index)">-</view>
                                        <view>{{item.num}}</view>
                                        <view @click.stop="addNum(item.name,index)">+</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </label>
                </checkbox-group>
            </view>
        </view>
        <!--清空购物车-->
        <view class="delAllGoods" @click="delAll">清空购物车</view>
        <!--结算-->
        <view class="jieSuan">
            <view>
                <checkbox-group @change="allChooseChange">
                    <label>
                        <checkbox value="all" :checked="allChooseState" /> 全选（{{buyNum}}）
                    </label>
                </checkbox-group>
            </view>
            <view class="goldColor">￥{{buyMoney}}</view>
            <view @click="toJeiSuan">去结算</view>
        </view>
    </view>
</template>

<script>
    import until from "../../until/until";
    export default {
        name: "car",
        data(){
            return{
                yunFei:{    //免运费
                    yunFeiState:true,
                    toMianFei:15,
                },
                huanGou:{     //换购
                    toHuanGou:60,
                },
                carData:{},    //购物车数据
                buyNum:0,  //选中的数量
                buyMoney:0,   //选中的钱
                allChooseState:false,  //全选的状态
            }
        },
        methods:{
            //选中当前商品(改变选中状态)
            checkboxChange: function (e) {
                let allData = this.carData.data, //所有商品数据
                    values = e.detail.value;  //所有选中的商品名字
                for (var i = 0; i < allData.length; ++i) {
                    if(values.includes(allData[i].name)){
                        this.$set(allData[i],'chooseState',true);
                        until.changeOneGoodsState(i,true);
                    }else{
                        this.$set(allData[i],'chooseState',false);
                        until.changeOneGoodsState(i,false);
                    }
                }
                this.carData=JSON.parse(JSON.stringify(until.carData));  //获取购物车信息并深拷贝
            },
            //点击减号
            jianNum(name,index){
                until.jianGoodsNum(index);
                this.carData=JSON.parse(JSON.stringify(until.carData));  //获取购物车信息并深拷贝
            },
            //点击加号
            addNum(name,index){
                until.addGoodsNum(index);
                this.carData=JSON.parse(JSON.stringify(until.carData));  //获取购物车信息并深拷贝
            },
            //全选按钮发生改变
            allChooseChange(e){
                if(this.allChooseState){
                    this.allChooseState=false;
                    until.changeAllGoodsState(false);  //改变所有商品选中状态
                    this.carData=JSON.parse(JSON.stringify(until.carData));  //获取购物车信息并深拷贝

                }else {
                    this.allChooseState=true;
                    until.changeAllGoodsState(true);  //改变所有商品选中状态
                    this.carData=JSON.parse(JSON.stringify(until.carData));  //获取购物车信息并深拷贝
                }
            },
            //清空购物车
            delAll(){
                until.delAllGoods();
                this.carData=JSON.parse(JSON.stringify(until.carData));
            },
            //点击去结算
            toJeiSuan(){
                uni.switchTab({
                    url:'/pages/user/user',
                })
            }
        },
        watch:{
            carData:function () {
                let chooseCount=0;
                let trueNum=0;
                this.carData.data.forEach(item=>{   //遍历
                    if (item.chooseState===false){
                        this.allChooseState=false;  //如果有一个未选中则全选为false
                    }else {
                        chooseCount+=item.num;
                        trueNum++
                    }
                });
                if (trueNum===this.carData.data.length) this.allChooseState=true;  //全选状态
                this.buyMoney=until.getMoneyNum();  //选中的总钱数
                this.buyNum=chooseCount;  //选中的件数
            },
            buyMoney(){
                this.yunFei.toMianFei-this.buyMoney>0 ?
                    this.yunFei.yunFeiState=true:
                    this.yunFei.yunFeiState=false
            }
        },
        created() {
            let chooseCount=0;
            let trueNum=0;
            this.carData=JSON.parse(JSON.stringify(until.carData));  //获取购物车信息并深拷贝
            this.carData.data.forEach(item=>{   //遍历
                if (item.chooseState===false){
                    this.allChooseState=false;  //如果有一个未选中则全选为false
                }else {
                    chooseCount+=item.num;
                    trueNum++
                }
            });
            if (trueNum===this.carData.data.length) this.allChooseState=true;  //全选状态
            this.buyMoney=until.getMoneyNum();  //选中的总钱数
            this.buyNum=chooseCount;  //选中的件数
        }
    }
</script>

<style scoped>
    /*购物车背景颜色*/
    #carBody{
        background-color: #f7f7f7;
        min-height: 37.5rem;
    }
    /*运费提示*/
    .tiShiYunFei{
        font-size: 0.8rem;
        height: 2rem;
        padding: 0 0.4rem;
        background-color: #fff1d6;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .goldColor{
        color: #fe8f00;
    }
    .tiShiYunFei>view:nth-of-type(2){
        font-size: 1.1rem;
    }
    /*换购提示*/
    .tiShiHuanGou{
        font-size: 0.8rem;
        height: 2rem;
        padding: 0 0.4rem;
        margin-top: 0.5rem;
        background-color: #fefefe;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    /*购物车展示数据*/
    .showCar{
        width: 100%;
        margin-top: 0.5rem;
        background-color: #fefefe;
    }
    .uni-list-cell {
        width: 100%;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        flex-wrap: nowrap;
    }
    .uni-list-cell>view:nth-of-type(1){
        width:15%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .uni-list-cell>view:nth-of-type(2){
        width:85%;
        display: flex;
        flex-wrap: nowrap;
    }
    .imgBox{
        width: 40%;
        height: 100%;
    }
    .imgBox>image{
        width: 100%;
        height: 100%;
    }
    .neiRong{
        width: 60%;
        padding: 0 0.3rem 0 1rem;
        height: 6.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .neiRong>view:nth-of-type(1){
        font-size: 1.1rem;
        font-weight: 500;
    }
    .neiRong>view:nth-of-type(2){
        width: 55%;
        background-color: #f6f6f6;
        padding: 0.2rem 0.3rem;
        font-size: 0.7rem;
        color: #a2a19f;
    }
    .neiRong>view:nth-of-type(3){
        font-size: 1.2rem;
        display: flex;
        justify-content: space-between;
    }
    .neiRong>view:nth-of-type(3)>text{
        color: #f7910a;
    }
    /*加减按钮*/
    .jiaJian{
        width: 6rem;
        height: 2rem;
        display: flex;
        flex-wrap: nowrap;
    }
    .jiaJian>view:nth-of-type(1),.jiaJian>view:nth-of-type(3){
        width: 33%;
        height: 2rem;
        text-align: center;
        line-height: 2rem;
        font-size: 1rem;
        border: 1rpx solid #a2a19f;
    }
    .jiaJian>view:nth-of-type(1){
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
    }
    .jiaJian>view:nth-of-type(3){
        border-top-right-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }
    .jiaJian>view:nth-of-type(2){
        width: 34%;
        height: 2rem;
        text-align: center;
        line-height: 2rem;
        font-size: 1rem;
        border-top: 1rpx solid #a2a19f;
        border-bottom: 1rpx solid #a2a19f;
    }
    /*删除所有购物车商品*/
    .delAllGoods{
        width: 6rem;
        height: 2rem;
        line-height: 2rem;
        font-size: 1rem;
        text-align: center;
        border: 2rpx solid #e6e6e6;
        color: #808080;
        margin: 1rem auto 4rem;
    }
    /*结算行*/
    .jieSuan{
        width: 100%;
        height: 3rem;
        padding: 0 0 0 0.5rem;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        border-top: 1rpx solid #a2a19f;
        display: flex;
        flex-wrap: nowrap;
    }
    .jieSuan>view{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .jieSuan>view:nth-of-type(1){
        width: 30%;
    }
    .jieSuan>view:nth-of-type(2){
        width: 40%;
        font-size: 1.1rem;
        text-align: right;
    }
    .jieSuan>view:nth-of-type(3){
        width: 30%;
        background-color: #17B357;
        color: #ffffff;
    }
</style>